<template>
  <view class="auth-page">
    <auth-tree :roleNo="role_no" :pageType="type" @check="checkChange" @tapEdit="showPopup" @tapAdd="showPopup"
      ref="detailTree" @tapDelete="onDelete" v-if="role_no"  @cancel="closePopup"></auth-tree>
    <view class="custom-center-popup" v-if="curPopupType">
      <u-popup :show="curPopupType?true:false" :round="20" mode="center" :overlay="true" :closeable="true"
        :closeOnClickOverlay="false" @close="closePopup">
        <view class="popup-title">
          {{curPopupType==='add'?"新增":"编辑"}}角色
        </view>
        <auth-tree :roleNo="role_no" :pageType="curPopupType" @submitSuccess="submitSuccess"  @cancel="closePopup"></auth-tree>
      </u-popup>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        role_no: '',
        curPopupType: null,
        checkData: null
      }
    },
    props: {
      type: {
        type: String,
        default: 'detail'
      },
      roleNo: {
        type: [String, Number],
        default: ''
      },
    },
    watch: {
      roleNo(newValue, oldValue) {
        this.role_no = newValue
        if (newValue) {
          this.$nextTick(() => {
            this.refresh()
          })
        }
      }
    },
    created() {
      if (this.roleNo) {
        this.role_no = this.roleNo
      }
    },
    methods: {
      deleteRole() {
        if (this.role_no) {
          const url = `/retail/operate/srvsys_app_role_delete`
          const req = [{
            "serviceName": "srvsys_app_role_delete",
            "condition": [{
              "colName": "role_no",
              "ruleType": "eq",
              "value": this.role_no
            }]
          }]
          this.$http.post(url, req).then(res => {
            if (res?.data?.state === 'SUCCESS') {
              uni.showToast({
                title: '删除成功'
              })
              this.role_no = ''
              this.$emit('on-change')
              this.$emit('deleteSuccess')
            } else {
              uni.showToast({
                title: res.data.resultMessage
              })
              this.$emit('deleteFail', res.data.resultMessage)
            }
          })
        }
      },
      onDelete(e) {
        uni.showModal({
          title: '提示',
          content: '是否删除？',
          success: (res) => {
            if (res.confirm) {
              this.deleteRole()
            }
          }
        })
      },
      submitSuccess(e) {
        console.log(e);
        this.closePopup()
        if (typeof e === 'string') {
          uni.showModal({
            title: e,
            showCancel: false
          })
        }
        this.$emit('on-change')
        this.$refs?.detailTree?.initData?.()
      },
      refresh() {
        this.$emit('on-refresh')
        this.$refs?.detailTree?.initData?.()
      },
      showPopup(type, data) {
        this.curPopupType = type
      },
      checkChange(e) {
        this.checkData = e
      },
      closePopup() {
        this.curPopupType = null
        this.$emit('close')
      }
    },
    onLoad(option) {
      if (option.role_no) {
        this.role_no = option.role_no
      }
    },
  }
</script>

<style scoped lang="scss">
  .auth-page {
    height: 100%;
    padding: 2rem;
		.custom-center-popup{
			::v-deep .auth-role-tree{
				max-height: 30vh;
			}
		}
  }
</style>
